<template>
  <div>
    <!--新增按钮-->
    <div class="a">
      <el-button icon="el-icon-circle-plus-outline" size="mini" type="success" @click="add()">新增</el-button>
    </div>

    <el-table
        :data="list"
        border
        stripe
        style="width: 100%">
      <!--网址名称-->
      <!--prop="title"循环数组的一项-->
      <el-table-column
          align="center"
          label="创建时间"
          width="190">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.goodsDate}}</span>
        </template>
      </el-table-column>
      <!--网址url-->
      <el-table-column
          label="商品名称"
          align="center"
          width="190">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsName}}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="积分"
          align="center"
          width="190">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.goodsScore}}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="库存数量"
          align="center"
          width="190">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsCount}}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="图片"
          align="center"
          width="190"
      >
        <template slot-scope="scope">

          <!--循环图片-->
          <img style="width: 40px;height:40px"
               :src="scope.row.imgList[0]?imgApi + scope.row.imgList[0].pic:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590724062230&di=8739ac76d0c953d5a0771ad4879cf8ac&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20170426%2F20170426150936_5589d267e409b4cf5d85897b4d68cc12_6.jpeg'"
               alt="">
        </template>
      </el-table-column>

      <!--   操作 删除-->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!--   操作 删除-->
          <el-button
              size="mini"
              type="success"
              @click="bianji(scope.row)">编辑
          </el-button>
          <!--编辑按钮-->
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击弹出框 model框-->
    <!--:动态绑定-->
    <el-dialog :title="this.title" :visible.sync="dialogFormVisible">
      <el-form :model="good">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="good.goodsName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="库存数量" :label-width="formLabelWidth">
          <el-input v-model="good.goodsCount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="兑换积分" :label-width="formLabelWidth">
          <el-input v-model="good.goodsScore" autocomplete="off"></el-input>
        </el-form-item>

        <!--        <el-form-item label="注册" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="good.goodsDescript" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="注册" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="good.imgList" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="商品ID" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="good.goodsId" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
       <!--//通过title 标识来判断 已使用图片的消失隐藏-->
        <el-form-item v-show="this.title === '编辑商品'?true:false" label="已使用" :label-width="formLabelWidth">
          <div class="imgs">
            <img class="imgss" @click="delimg(index)" v-for="(item,index) in good.imgList" :src="imgApi +item.pic" alt="">
          </div>
        </el-form-item>


        <!--图片上传-->
        <el-form-item label="图片上传" :label-width="formLabelWidth">
          <el-upload
              :action="api + '/upload'"
              list-type="picture-card"
              :headers="imgheader"
              :on-success="handlesuccess"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!--          <el-dialog :visible.sync="dialogVisible">-->
          <!--            <img width="100%" :src="dialogImageUrl" alt="">-->
          <!--          </el-dialog>-->

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upok">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "addgoods",
    data() {
      return {
        title: '新增商品',
        list: [],
        imgApi: this.API.API3,
        formLabelWidth: '70px',
        dialogFormVisible: false,
        //本地获取api 里面的api1
        api: this.API.API1,
        // 每次提交成功图片数组
        fileList: [],
        //上传的传的一组对象对象
        good: {
          goodsName: '',
          goodsCount: '',
          goodsScore: '',
          goodsDescript: '',
          imgList: [],
          goodsId: null,
        }

      }
    },
    methods: {
      add() {//新增商品
        this.dialogFormVisible = true
        this.title = '新增商品'
      },

      handleDelete(ele) {//删除商品方法
        console.log(ele.goodsId)
        var goodsId = new FormData()
        goodsId.append('goodsId', ele.goodsId)
        console.log(goodsId.get('goodsId'))

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.API.API1 + '/delGoodsById', goodsId, {
            headers: {
              'Authorization': 'XIEGE ' + this.API.token,
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }).then(res => {
            console.log(res)
            this.getlist()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '删除失败'
            })
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      bianji(e) {//编辑商品
        this.dialogFormVisible = true
        this.good = e
        this.title = '编辑商品'

      },

      delimg(index) {//点击图片删除对应项图片
        console.log(index)
        this.$alert('是否删除该图片?', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            let imgs = this.good.imgList
            for (let i = 0; i < imgs.length; i++) {
              if (i === index) {
                console.log(this.good.imgList[i])
                this.good.imgList.splice(i, 1)
                return
              }
            }
          }
        })
      },

      handlesuccess(response, file, fileList) {//图片提交后成功回调
        console.log(response)
        console.log(file)
        console.log(fileList)
        this.fileList = fileList
      },

      handleRemove(file, fileList) {//清除图片
        console.log(fileList)
        // fileList 当前更新数据列表
        this.fileList = fileList
      },

      upok() {//弹出框确认按钮
        // 放外面公用方法
        console.log(this.fileList)
        this.fileList.forEach((item, index) => {
          this.good.imgList.push({
            pic: item.response.url.slice(0, -11)
          })
        })
        console.log(this.good)

        if (this.title == '新增商品'){
          // 接收本地good对象，因为goodsScore goodsCount强转成数组
          var ff = {
            goodsName: this.good.goodsName,
            goodsCount: parseInt(this.good.goodsCount),
            goodsScore: parseInt(this.good.goodsScore),
            goodsDescript: '',
            imgList: this.good.imgList,
            goodsId: null,
          }

          this.axios.post(this.API.API1 + '/addGoods', ff, {
            headers: {
              'Authorization': 'XIEGE ' + this.API.token,
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }).then(res => {
            console.log(res)
            this.good = {}
            this.dialogFormVisible = false
            this.getlist()
          })
        }
        // 不能else 考虑到会出 新增商品或者编辑商品以外的 乱码字符
        if (this.title == '编辑商品'){
          var f = {
            goodsName: this. good.goodsName,
            goodsCount: parseInt(this.good.goodsCount),
            goodsScore: parseInt(this.good.goodsScore),
            goodsDescript: this.good.goodsDescript,
            imgList: this.good.imgList,
            goodsId:this.good.goodsId,
          }
          this.axios.post(this.API.API1 + '/updGoods',f,{
            headers: {
              'Authorization': 'XIEGE ' + this.API.token,
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }).then(res=>{
            console.log(res)
            this.dialogFormVisible = false
            this.getlist()
          })

        }

      },

      getlist() {//获取数据
        this.axios.post(this.API.API1 + '/getAllGoods', {}, {
          headers: {
            'Authorization': 'XIEGE ' + this.API.token,
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          console.log(res)

          this.list = res.data
        })

      },

    },

    created() {
      this.getlist()
    },

    computed: {
      //上传时候需要的headers 只是定义在本地
      imgheader() {
        return {
          'Authorization': 'XIEGE ' + this.API.token,
        }
      }
    }
  }
</script>

<style scoped>
  /*穿透符号*/
  /*>>>.el-upload{*/
  /*  display: block;*/
  /*}*/
  .imgs{
    height: 30px;
    display: inline-block;
    width: 100%;
  }
  .imgss{
    width: 10%;
  }


</style>